<!--
 * @name order
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-02
 -->

<template>
  <div class="p-order common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :eventName="gameInfo.eventName"
    ></page-title>
    <div class="content">
      <div class="title">
        <div class="order">序号</div>
        <div class="content-detail">
          <div class="delegation">单位</div>
          <!-- <div class="name">姓名</div>
          <div class="horseName">马名</div> -->
        </div>
      </div>
      <div class="info">
        <div class="item" v-for="(item, index) in showList" :key="index">
          <div class="order">{{ item.Order }}</div>
          <div class="item-wrap">
            <div class="item-detail">
              <div class="delegation">{{ item.CountryName }}</div>
              <!-- <div class="name">{{ item.name }}</div>
              <div class="horseName">{{ item.horseName }}</div> -->
            </div>
            <img src="@/assets/img/scb/line-divide.png" alt="" height="5px" width="100%" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useStore from '@/store'
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  match: '',
  event: 'DRESTEAM',
  type: '出场顺序',
  eventName: '',
})

const dataList = ref([])
const showList = ref([])
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const commonStore = useStore.useCommonStore()

const params = ref({})
const procName = ref([])
const page = ref(0)

const timer = ref(null)

onUnmounted(() => {
  clearInterval(timer.value)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
onMounted(async () => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  await getData()
  getShowList()
})

const getData = async () => {
  if (procName.value.length > 0) {
    await fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

const getShowList = () => {
  // 清除已有定时器
  if (timer.value) clearInterval(timer.value)

  if (dataList.value.length > 8) {
    const updatePage = () => {
      const maxPage = Math.ceil(dataList.value.length / 8) - 1
      console.log(maxPage)

      // 如果超过最大页数，回到第一页
      if (page.value > maxPage) {
        page.value = 0
      }

      showList.value = dataList.value.slice(page.value * 8, (page.value + 1) * 8)
      console.log('Current page:', page.value, 'Data:', showList.value)

      page.value += 1
    }

    // 立即执行一次
    updatePage()

    // 设置定时器
    timer.value = setInterval(updatePage, 8000)
  } else {
    // 数据不足8条时直接显示全部
    showList.value = [...dataList.value]
  }
}

watchEffect(() => {
  if (results.value?.datasetList) {
    gameInfo.value.event = results.value.datasetList[0][0]?.EventCode
    gameInfo.value.match = results.value.datasetList[0][0].MatchName
    gameInfo.value.eventName = results.value.datasetList[0][0].EventName
    dataList.value = results.value.datasetList[1]
  }
})

watch(
  () => commonStore.receivedActionMessages,
  async (newVal, oldVal) => {
    if (newVal.length > 0) {
      page.value = 0
      clearInterval(timer.value)
      await getData()
      getShowList()
    }
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/order';
</style>
